<template>
  <div class="mod-info">
    <div class="grid-content bg-purple-dark">
      <el-form ref="form" :model="form" :rules="dataRule" label-width="140px" class="demo-ruleForm">
        <div>
          <div class="bold">主体信息</div>
          <el-form-item label="企业名称" prop="company_name" :rules="[{ required: true, message: '企业名称不能为空' }]">
            <el-input v-model="form.company_name" maxlength="16"></el-input>
          </el-form-item>
          <el-form-item label="统一信用代码" prop="credit_code" :rules="[{ required: true, message: '统一信用代码不能为空' }]">
            <el-input v-model="form.credit_code" maxlength="50"></el-input>
          </el-form-item>
          <el-form-item label="经营范围" prop="business_scope" :rules="[{ required: true, message: '经营范围不能为空' }]">
            <el-input v-model="form.business_scope" maxlength="50"></el-input>
          </el-form-item>
          <el-form-item label="企业所在地区" style="position:relative" prop="province" :rules="[{ required: true, message: '请选择企业所在地区' }]">
            <el-cascader ref="enterpriseRefSubCat" v-model="enterpriseProvince" placeholder="" :options="options" :props="{ expandTrigger: 'hover' }"
              @change="enterpriseChange" style="width: 100%;"></el-cascader>
            <span v-if="showHIed" style="position: absolute;left: 10px;">{{
                enterpriseProvince
            }}</span>
          </el-form-item>
          <el-form-item label="详情地址" prop="company_address" :rules="[{ required: true, message: '详情地址不能为空' }]">
            <el-input v-model="form.company_address" maxlength="100"></el-input>
          </el-form-item>
        </div>
        <div>
          <!-- <div>法人信息</div> -->
          <el-form-item label="法人姓名" prop="legal_representative" :rules="[{ required: true, message: '法人姓名不能为空' }]">
            <el-input v-model="form.legal_representative" maxlength="8"></el-input>
          </el-form-item>
          <el-form-item label="证件类型" prop="id_type" :rules="[{ required: true, message: '请选择证件类型' }]">
            <el-radio v-model="form.id_type" :label="0">身份证</el-radio>
            <el-radio v-model="form.id_type" :label="1">护照</el-radio>
          </el-form-item>
          <el-form-item label="法人证件号码" prop="id_number" :rules="[{ required: true, message: '法人证件号码不能为空' }]">
            <el-input maxlength="50" v-model="form.id_number"></el-input>
          </el-form-item>
          <el-form-item label="法人手机号" prop="lr_mobile">
            <el-input v-model="form.lr_mobile" maxlength="11"></el-input>
          </el-form-item>
          <el-form-item label="法人邮箱" prop="lr_email" :rules="[{ required: true, message: '法人邮箱不能为空' }]">
            <el-input type="email" v-model="form.lr_email" maxlength="30"></el-input>
          </el-form-item>
        </div>

        <div>
          <!-- <div>上传附件</div> -->
          <el-form-item label="营业执照" prop="business_license_images" :rules="[{ required: true, message: '请上传营业执照' }]">
            <Imglist @updataImg="uploadBusinessLicenseImages" :limit="2" :value="businessLicenseImages" :clearVisible="clearVisible"></Imglist>
            <!-- <uploadImg :value="[v.img]" :limit='1'  @updataImg="getImg($event,i)"></uploadImg> -->
          </el-form-item>
          <el-form-item label="法人身份证正反面" prop="identty_images" :rules="[{ required: true, message: '请上传法人身份证正反面' }]">
            <Imglist @updataImg="uploadIdenttyImages" :limit="2" :value="identtyImages" :clearVisible="clearVisible"></Imglist>
          </el-form-item>
        </div>
        <div class="bold">店铺信息</div>
        <el-form-item label="商户名称" prop="shop_name" :rules="[{ required: true, message: '商户名称不能为空' }]">
          <el-input v-model="form.shop_name" maxlength="16"></el-input>
        </el-form-item>
        <el-form-item label="省市区" prop="province_name" :rules="[{ required: true, message: '省市区不能为空' }]">
          <el-cascader ref="refSubCat" v-model="provinces" :options="options" :props="{ expandTrigger: 'hover' }" @change="handleChange"
            style="width: 100%;"></el-cascader>
        </el-form-item>

        <!-- <el-form-item label="所属街道" prop="street_code" :rules="[ { required: true, message: '所属街道不能为空'}]">
          <el-select v-model="form.street_code" placeholder="请选择 (请先选择省市区)" @change="streetChange" style="width: 100%;">
            <el-option v-for="(v,i) in streetList" :key="i" :label="v.label" :value="v.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属社区" prop="community_code" :rules="[ { required: true, message: '所属社区不能为空'}]">
          <el-select v-model="form.community_code" placeholder="请选择 (请先选择所属街道)" @change="communityChange" style="width: 100%;">
            <el-option v-for="item in communityList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item> -->

        <el-form-item label="商户地址" prop="address" :rules="[{ required: true, message: '商户地址不能为空' }]">
          <el-input v-model="form.address" v-on:input="getAddressKeyword" maxlength="100"></el-input>
        </el-form-item>

        <!-- 地图 -->
        <div id="container" style="width:100%; height:300px"></div>

        <el-form-item label="商业主体名称" prop="main_name" :rules="[{ required: true, message: '商业主体名称不能为空' }]">
          <el-input v-model="form.main_name" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="商户LOGO" prop="logo" :rules="[{ required: true, message: '请上传商户LOGO' }]">
          <Imglist @updataImg="updataImg" :limit="1" :value="logo" :clearVisible="clearVisible"></Imglist>
        </el-form-item>
        <el-form-item label="门店图片" prop="store_images" :rules="[{ required: true, message: '请上传门店图片' }]">
          <Imglist @updataImg="uploadStoreImages" :limit="2" :value="storeImages" :clearVisible="clearVisible"></Imglist>
        </el-form-item>
        <el-form-item label="客服电话" prop="customer_service_phone" :rules="[{ required: true, message: '客服电话不能为空' }]">
          <el-input v-model.number="form.customer_service_phone" maxlength="11"></el-input>
        </el-form-item>
        <el-form-item label="商户简介" prop="remark" :rules="[{ required: true, message: '商户简介不能为空' }]">
          <el-input type="textarea" v-model="form.remark" maxlength="400"></el-input>
        </el-form-item>
        <el-form-item label="营业时间" prop="business_hours">
          <!-- <el-date-picker v-model="form.business_hours" type="datetime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期">
          </el-date-picker> -->
          <el-checkbox-group v-model="businessHours">
            <el-checkbox label="周一"></el-checkbox>
            <el-checkbox label="周二"></el-checkbox>
            <el-checkbox label="周三"></el-checkbox>
            <el-checkbox label="周四"></el-checkbox>
            <el-checkbox label="周五"></el-checkbox>
            <el-checkbox label="周六"></el-checkbox>
            <el-checkbox label="周日"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="时间段" prop="time_quantum">
          <el-time-select placeholder="起始时间" v-model="startTime" :picker-options="{
            start: '00:00',
            step: '00:30',
            end: '23:30'
          }">
          </el-time-select>
          <el-time-select placeholder="结束时间" v-model="endTime" :picker-options="{
            start: '00:00',
            step: '00:30',
            end: '23:30',
            minTime: startTime
          }">
          </el-time-select>
        </el-form-item>
        <el-form-item label="场地说明" prop="place_remark" :rules="[{ required: true, message: '场地说明不能为空' }]">
          <el-input type="textarea" v-model="form.place_remark" maxlength="200"></el-input>
        </el-form-item>
        <div>
          <div class="bold">
            运营人信息
          </div>
          <el-form-item label="姓名" prop="loser" :rules="[{ required: true, message: '姓名不能为空' }]">
            <el-input v-model="form.loser" maxlength="5"></el-input>
          </el-form-item>
          <el-form-item label=" 手机号码" prop="mobile">
            <el-input v-model="form.mobile" maxlength="11"></el-input>
          </el-form-item>
        </div>

        <el-form-item>
          <el-button type="primary" @click="setSubmit('form')">设置管理账号</el-button>
          <!--  <el-button type="primary" @click="onSubmit('form')">初始化</el-button> -->
        </el-form-item>
      </el-form>
      <el-dialog title="设置管理账号" :append-to-body="true" :visible.sync="popup" width="30%">
        <el-form ref="formadmin" :model="user" label-width="140px" class="demo-ruleForm">
          <el-form-item label="用户名" prop="username" :rules="[{ required: true, message: '用户名不能为空' }]">
            <el-input v-model="user.username" maxlength="20" placeholder="登录帐号"></el-input>
          </el-form-item>
          <el-form-item label="昵称" prop="nickName" :rules="[{ required: true, message: '昵称不能为空' }]">
            <el-input v-model="user.nickName" placeholder="昵称"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password" :rules="[{ required: passwordRequired, message: '密码不能为空' }]">
            <el-input v-model="user.password" maxlength="20" type="password" placeholder="密码"></el-input>
            <span v-if="!passwordRequired" class="fontcolor">提示：不填写密码默认为不修改密码</span>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input type="email" v-model="user.email" maxlength="30" placeholder="邮箱"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="mobile" :rules="[{ required: true, message: '手机号不能为空' }]">
            <el-input :class="userMobile ? 'is-error' : ''" v-model="user.mobile" placeholder="手机号" maxlength="11" show-word-limit></el-input>
            <div class="el-form-item__error" v-if="userMobile">
              手机号格式错误
            </div>
          </el-form-item>
          <el-form-item label="状态" size="mini" prop="status" :rules="[{ required: true, message: '请选择状态' }]">
            <el-radio-group v-model="user.status">
              <el-radio :label="0">禁用</el-radio>
              <el-radio :label="1">正常</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="popup = false">取消</el-button>
          <el-button type="primary" @click="dataFormSubmit('formadmin')">确定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import seviceApi from '@/api/serviceApi.js'
import Imglist from './../oss/oss-uploadImg'
import axios from 'axios'
import qqmapPlus from 'qqmap-plus'
import { isEmail, isMobile } from '@/utils/validate'

export default {
  data () {
    var validateMobile = (rule, value, callback) => {
      if (!isMobile(value)) {
        callback(new Error('手机号格式错误'))
      } else {
        callback()
      }
    }
    return {
      form: {
        id: '',
        company_name: '',
        credit_code: '',
        business_scope: '',
        province: '',
        company_address: '',
        legal_representative: '',
        id_type: '',
        id_number: '',
        lr_mobile: '',
        lr_email: '',
        business_license_images: '',
        identty_images: '',
        logo: '',
        store_images: '',
        shop_name: null,
        province_code: null,
        city_code: null,
        area_code: null,
        province_name: '',
        city_name: '',
        area_name: '',
        map_punctuation: '',
        address: null,
        main_name: null,
        customer_service_phone: null,
        remark: null,
        business_hours: null,
        time_quantum: null,
        place_remark: null,
        loser: null,
        mobile: null,
        tx_longitude: null, // 经度
        tx_latitude: null, // 纬度
        user: {}
      },
      passwordRequired: true,
      user: {
        userId: '',
        username: '',
        password: '',
        email: '',
        mobile: '',
        status: '',
        nickName: ''
      },
      userMobile: false,
      showHIed: false,
      businessHours: [], // 时间
      startTime: '',
      endTime: '',
      enterpriseProvinceVal: '',
      enterpriseProvince: [], // 企业省市区
      businessLicenseImages: [], // 编辑回显营业执照
      identtyImages: [], // 身份证
      logo: [], // 店铺logo
      storeImages: [], // 门店图图片
      options: [],
      provinces: [],
      popup: false, // 设置管理员弹窗
      // 腾讯地图
      map: null,
      getAddress: '湖北省武汉市江夏区光谷世贸中心',
      getAddCode: null,
      addressKeyword: '',
      clearVisible: false,
      shopInfo: {
        lng: '114.4216',
        lat: '30.471861'
      },
      dataRule: {
        lr_mobile: [
          {
            required: true,
            message: '手机号不能为空',
            trigger: 'blur'
          },
          {
            validator: validateMobile,
            trigger: 'blur'
          }
        ],
        mobile: [
          {
            required: true,
            message: '手机号不能为空',
            trigger: 'blur'
          },
          {
            validator: validateMobile,
            trigger: 'blur'
          }
        ]
      },
      streetList: [],
      communityList: [],
      setTime: null
    }
  },
  components: {
    Imglist
  },
  mounted () {
    this.getProvinces()
    this.getShop()
    // this.init()
  },
  methods: {
    // 上传营业执照
    uploadBusinessLicenseImages (e) {
      this.form.business_license_images = e
    },
    // 上传法人身份证
    uploadIdenttyImages (e) {
      this.form.identty_images = e
    },
    // 上传店铺logo
    updataImg (e) {
      this.form.logo = e
    },
    // 上传门店图片
    uploadStoreImages (e) {
      this.form.store_images = e
    },

    getShop () {
      seviceApi.getAdminShop().then(res => {
        if (res && res.data.code == 200) {
          if (res.data.data) {
            this.form = res.data.data

            if (res.data.data.tx_latitude) {
              this.shopInfo.lat = res.data.data.tx_latitude
              this.shopInfo.lng = res.data.data.tx_longitude
            }
            if (res.data.data.logo) {
              this.logo = res.data.data.logo.split(',')
            }
            if (res.data.data.identty_images) {
              this.identtyImages = res.data.data.identty_images.split(',')
            }
            if (res.data.data.business_license_images) {
              this.businessLicenseImages = res.data.data.business_license_images.split(
                ','
              )
            }
            if (res.data.data.store_images) {
              this.storeImages = res.data.data.store_images.split(',')
            }
            if (res.data.data.business_hours) {
              this.businessHours = res.data.data.business_hours.split(',')
            }
            if (res.data.data.time_quantum) {
              this.startTime = res.data.data.time_quantum.split('-')[0]
              this.endTime = res.data.data.time_quantum.split('-')[1]
            }

            if (res.data.data.province) {
              this.enterpriseProvince = res.data.data.province
              this.showHIed = true
            }
            this.provinces = [
              res.data.data.province_code,
              res.data.data.city_code,
              res.data.data.area_code
            ]
            this.getStreetList(this.form.area_code)
            this.getCommunityList()
            this.init()
          }
        } else {
          this.form.admin_id = 0
        }
      })
    },
    init () {
      var that = this
      // EXUBZ-5PT6U-ZF5VL-2BM27-ZOST7-VYFIP
      // KNZBZ-YSB3S-QGNOH-6UN4N-LVGUZ-OJFPQ
      qqmapPlus.init('TBYBZ-WT2W6-4RXSK-E234N-BH7S7-VGBJ4', () => {
        var myLatlng = new qq.maps.LatLng(this.shopInfo.lat, this.shopInfo.lng)
        var myOptions = {
          zoom: 16,
          center: myLatlng,
          mapTypeId: qq.maps.MapTypeId.ROADMAP
        }
        that.map = new qq.maps.Map(
          document.getElementById('container'),
          myOptions
        )
        var marker = new qq.maps.Marker({
          position: myLatlng,
          map: that.map
        })
        // 获取点击后的地址
        qq.maps.event.addListener(that.map, 'click', function (event) {
          if (marker) {
            marker.setMap(null)
            marker = null
          }
          // 获取点击后的地图坐标
          that.shopInfo.lng = event.latLng.getLng()
          that.shopInfo.lat = event.latLng.getLat()
          marker = new qq.maps.Marker({
            position: new qq.maps.LatLng(
              event.latLng.getLat(),
              event.latLng.getLng()
            ),
            map: that.map
          })
          that.getAddressCode()
        })
      })
    },

    // 获取街道列表
    getStreetList (code) {
      seviceApi.streetList(code).then(res => {
        if (res && res.data.code == 200) {
          this.streetList = res.data.list
        }
      })
    },
    streetChange (e) {
      this.form.community_code = ''
      this.getCommunityList()
      for (let i = 0; i < this.streetList.length; i++) {
        if (this.streetList[i].value == e) {
          this.form.street_name = this.streetList[i].label
          break
        }
      }
    },
    // 获取社区列表
    getCommunityList () {
      if (!this.form.street_code) {
        this.communityList = []
      } else {
        seviceApi.streetList(this.form.street_code).then(res => {
          if (res && res.data.code == 200) {
            this.communityList = res.data.list
          }
        })
      }
    },
    communityChange (e) {
      for (let i = 0; i < this.communityList.length; i++) {
        if (this.communityList[i].value == e) {
          this.form.community_name = this.communityList[i].label
          break
        }
      }
    },

    // 通过地址获得位置
    getAddressKeyword () {
      var that = this
      if (that.setTime) clearTimeout(that.setTime)
      let address =
        that.form.province_name +
        that.form.city_name +
        that.form.area_name +
        that.form.address
      seviceApi.mapAddressgetcode(address).then(res => {
        if (res && res.data.code == 200) {
          ; (that.form.tx_longitude = res.data.date.location.lng),
            (that.form.tx_latitude = res.data.date.location.lat)
          that.setTime = setTimeout(() => {
            that.shopInfo.lng = res.data.date.location.lng
            that.shopInfo.lat = res.data.date.location.lat
            that.init()
          }, 1000)
        }
      })
    },
    // 通过坐标获得地址
    getAddressCode () {
      var that = this
      var lat = parseFloat(this.shopInfo.lat)
      var lng = parseFloat(this.shopInfo.lng)
      var latLng = new qq.maps.LatLng(lat, lng)
      this.shopInfo.lat = latLng.lat
      this.shopInfo.lng = latLng.lng
      let location = latLng.lat + ',' + latLng.lng
      seviceApi.mapAddress(location).then(res => {
        that.form.address = res.data.date.formatted_addresses.rough
        var adcode = res.data.date.ad_info.adcode
          ; (that.form.tx_longitude = res.data.date.location.lng),
            (that.form.tx_latitude = res.data.date.location.lat)
        // 根据区的经纬度查询省市区
        seviceApi.getlbsPat(adcode).then(res => {
          if (res && res.data.code == 200) {
            if (res.data.list.length == 2) {
              ; (that.form.province_code = res.data.list[0].value),
                (that.form.province_name = res.data.list[0].label)
              that.form.area_code = res.data.list[1].value
              that.form.area_name = res.data.list[1].label
              that.provinces = [res.data.list[0].value, res.data.list[1].value]
            } else {
              ; (that.form.province_code = res.data.list[0].value),
                (that.form.province_name = res.data.list[0].label)
              that.form.city_code = res.data.list[1].value
              that.form.city_name = res.data.list[1].label
              that.form.area_code = res.data.list[2].value
              that.form.area_name = res.data.list[2].label
              that.provinces = [
                res.data.list[0].value,
                res.data.list[1].value,
                res.data.list[2].value
              ]
            }
          }
        })
      })
    },

    // 获取省市区
    getProvinces () {
      seviceApi.getCnareaTreelbs().then(res => {
        if (res && res.data.code == 200) {
          this.options = res.data.tree.children
        }
      })
    },
    // 设置管理员账号
    setSubmit () {
      if (this.form.business_license_images) {
        if (typeof this.form.business_license_images === 'string') {
          this.form.business_license_images = this.form.business_license_images
        } else {
          this.form.business_license_images = this.form.business_license_images.join(
            ','
          )
        }
      } else {
        this.form.business_license_images = this.businessLicenseImages.join(',')
      }

      if (this.form.identty_images) {
        if (typeof this.form.identty_images === 'string') {
          this.form.identty_images = this.form.identty_images
        } else {
          if (this.form.identty_images.length == 2) {
            this.form.identty_images = this.form.identty_images.join(',')
          } else {
            this.$message({
              message: '身份证正反面都要上传',
              type: 'warning'
            })
            return false
          }
        }
      } else {
        if (this.identtyImages.length == 2) {
          this.form.identty_images = this.identtyImages.join(',')
        } else {
          this.$message({
            message: '身份证正反面都要上传',
            type: 'warning'
          })
          return false
        }
      }

      if (this.form.logo) {
        if (typeof this.form.logo === 'string') {
          this.form.logo = this.form.logo
        } else {
          this.form.logo = this.form.logo.join(',')
        }
      } else {
        this.form.logo = this.logo.join(',')
      }

      if (this.form.store_images) {
        if (typeof this.form.store_images === 'string') {
          this.form.store_images = this.form.store_images
        } else {
          this.form.store_images = this.form.store_images.join(',')
        }
      } else {
        this.form.store_images = this.storeImages.join(',')
      }

      this.form.map_punctuation =
        this.form.province_name + this.form.city_name + this.form.area_name
      if (this.businessHours) {
        this.form.business_hours = this.businessHours.join(',')
      }
      // 拼接时间段
      this.form.time_quantum = this.startTime + '-' + this.endTime
      if (this.form.identty_images) {
      }
      this.$refs['form'].validate(valid => {
        if (valid) {
          // 编辑时，密码不验证
          if (this.form.id) {
            this.passwordRequired = false
          }
          this.popup = true
          // 获取用户账户信息
          seviceApi.getUserInfo(this.form.admin_id).then(res => {
            if (res && res.data.code == 200) {
              let data = res.data
              this.user.userId = data.user.userId
              this.user.username = data.user.username
              this.user.email = data.user.email
              this.user.mobile = data.user.mobile
              this.user.status = data.user.status
              this.user.nickName = data.user.nickName
            }
          })
        }
      })
    },
    // 提交
    dataFormSubmit (form) {
      this.form.user = this.user

      this.$refs['formadmin'].validate(valid => {
        if (valid) {
          // 管理员验证手机号
          if (!isMobile(this.form.user.mobile)) {
            this.userMobile = true
            return false
          }
          if (this.form.id == '') {
            seviceApi.saveInitializeShop(this.form).then(res => {
              if (res && res.data.code == 200) {
                this.$message({
                  showClose: true,
                  message: '添加成功',
                  type: 'success'
                })
                this.popup = false
                // this.getShop();
              }
            })
          } else {
            seviceApi.saveInitializeShop(this.form).then(res => {
              if (res && res.data.code == 200) {
                this.$message({
                  showClose: true,
                  message: '修改成功',
                  type: 'success'
                })
                this.popup = false
                // this.getShop();
              }
            })
          }
        }
      })
    },
    // 企业省市区选择
    enterpriseChange (value) {
      this.enterpriseProvince = value
      this.showHIed = false
      console.log(value)
      if (value.length == 2) {
        this.form.province =
          this.$refs['enterpriseRefSubCat'].getCheckedNodes()[0].pathLabels[0] +
          this.$refs['enterpriseRefSubCat'].getCheckedNodes()[0].pathLabels[1]
      } else {
        this.form.province =
          this.$refs['enterpriseRefSubCat'].getCheckedNodes()[0].pathLabels[0] +
          this.$refs['enterpriseRefSubCat'].getCheckedNodes()[0].pathLabels[1] +
          this.$refs['enterpriseRefSubCat'].getCheckedNodes()[0].pathLabels[2]
      }
    },
    // 省市区选择
    handleChange (value) {
      this.provinces = value
      if (value.length == 2) {
        ; (this.form.province_code = value[0]),
          (this.form.province_name = this.$refs[
            'refSubCat'
          ].getCheckedNodes()[0].pathLabels[0])
        this.form.area_code = value[1]
        this.form.area_name = this.$refs[
          'refSubCat'
        ].getCheckedNodes()[0].pathLabels[1]
        this.form.city_name = ''
      } else {
        ; (this.form.province_code = value[0]),
          (this.form.province_name = this.$refs[
            'refSubCat'
          ].getCheckedNodes()[0].pathLabels[0])
        this.form.city_code = value[1]
        this.form.city_name = this.$refs[
          'refSubCat'
        ].getCheckedNodes()[0].pathLabels[1]
        this.form.area_code = value[2]
        this.form.area_name = this.$refs[
          'refSubCat'
        ].getCheckedNodes()[0].pathLabels[2]
      }
      this.form.street_code = ''
      this.form.community_code = ''
      this.getStreetList(this.form.area_code)
    }
  }
}
</script>

<style>
.el-dialog__body {
  margin: 0 auto;
}

.fontcolor {
  font-size: 12px;
  color: #999;
}

#container {
  /*地图(容器)显示大小*/
  margin-bottom: 20px;
}

.is-error .el-input__inner {
  border-color: #f56c6c;
}

.el-scrollbar__wrap {
  margin-right: 0px !important;
}
</style>
